<template>
  <view class="paper">
    <view class="paper_title"> 你最近收到了{{ list.length }}份试卷 </view>
    <view class="paper_swiper" v-if="list.length > 0">
      <view class="swiper">
        <view class="swiper_container" :style="{ left: -pageNo * 100 + '%' }">
          <view
            class="swiper_content"
            v-for="(item, index) in list"
            :key="index"
          >
            <view class="paper_content">
              <text class="paper_title">{{ item.gameTitle }}</text>
              <text class="paper_subtitle"
                >{{ item.bookYear }}/{{ item.examType | examTypeFilter }}</text
              >
              <text class="paper_subtitle">{{ item.startTime }}</text>
              <template v-if="item.gameType === '2'">
                <text class="paper_tips">{{
                  item.gameCategory | gameCategoryFilter
                }}</text>
              </template>
              <template v-if="item.gameType === '3'">
                <text class="paper_tips">{{ item.partInNum }}人参加</text>
              </template>
              <view class="paper_info">
                <template
                  v-if="
                    new Date().getTime() - new Date(item.startTime).getTime() <
                    0
                  "
                >
                  <view class="paper_text" v-if="item.gameType === '1'"
                    >答题还未开始</view
                  >
                  <view
                    class="paper_text"
                    v-else-if="item.gameType === '2' || item.gameType === '3'"
                    >比赛还未开始</view
                  >
                </template>
                <template
                  v-if="
                    new Date().getTime() - new Date(item.endTime).getTime() >= 0
                  "
                >
                  <view class="paper_text" v-if="item.gameType === '1'"
                    >答题已结束</view
                  >
                  <view
                    class="paper_text"
                    v-else-if="item.gameType === '2' || item.gameType === '3'"
                    >比赛已结束</view
                  >
                </template>
                <view
                  class="paper_button"
                  :class="{
                    active:
                      new Date().getTime() -
                        new Date(item.startTime).getTime() <
                        0 ||
                      new Date().getTime() - new Date(item.endTime).getTime() >=
                        0,
                  }"
                  @click="handleSelect(item)"
                >
                  <text>开始答题</text>
                </view>
              </view>
              <view class="paper_tag">
                <text>{{ item.gameType | gameTypeFilter }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="swiper_prev" @click="prev()">
        <u-icon name="arrow-left" color="#0B8ACC" size="72"></u-icon>
      </view>
      <view class="swiper_next" @click="next()">
        <u-icon name="arrow-right" color="#0B8ACC" size="72"></u-icon>
      </view>
    </view>
    <view class="paper_btn" @click="handlePush()">
      <text>试卷列表</text>
    </view>
    <Tips :show="showTips1" :content="tipsContent1"></Tips>
    <Tips :show="showTips2" :content="tipsContent2"></Tips>
  </view>
</template>

<script>
export default {
  name: "ReceivingStation",
  components: {},
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  filters: {
    examTypeFilter(status) {
      const statusMap = {
        1: "单词听写",
        2: "单词听选",
        3: "模考真题",
      };
      return statusMap[status];
    },
    gameTypeFilter(status) {
      const statusMap = {
        1: "个人赛",
        2: "对抗赛",
        3: "排位赛",
      };
      return statusMap[status];
    },
    gameCategoryFilter(status) {
      const statusMap = {
        1: "1v1",
        2: "2v2",
        3: "3v3",
      };
      return statusMap[status];
    },
  },
  computed: {
    totalNo() {
      return Math.ceil(this.list.length / this.pageSize);
    },
  },
  data() {
    return {
      pageNo: 0,
      pageSize: 3,
      showTips1: false,
      showTips2: false,
      tipsContent1: "考试还未开始！",
      tipsContent2: "考试已结束！",
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleSelect(item) {
      if (new Date().getTime() - new Date(item.startTime).getTime() < 0) {
        this.showTips1 = true;
        setTimeout(() => {
          this.showTips1 = false;
        }, 2000);
        return;
      }
      if (new Date().getTime() - new Date(item.endTime).getTime() >= 0) {
        this.showTips2 = true;
        setTimeout(() => {
          this.showTips2 = false;
        }, 2000);
        return;
      }
      this.$emit("select", item.id);
    },
    handlePush() {
      this.$emit("push");
    },
    prev() {
      if (this.pageNo === 0) return;
      this.pageNo--;
    },
    next() {
      if (this.pageNo === this.totalNo - 1) return;
      this.pageNo++;
    },
  },
};
</script>
<style scoped lang="scss">
@import "./ReceivingStation";
</style>
